<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="tabsBox">
			<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab" color="#000000"
				activeColor="#6D9CB3" height="50rpx" lineHeight="5rpx" lineColor="#6D9CB3" lineScale="0.4"
				bgColor="transparent" paddingItem="20rpx">
			</v-tabs>
			<view class="publishList">
				<view class="publishItem">
					<view class="publishHead">
						<image :src="baseurl+'project/test.png'" class="avatar"></image>
						<view class="publishNameBox">
							<text class="name">测试姓名</text>
							<text class="time">2024-06-09</text>
						</view>
						<view class="publishVoteBox">
							<text class="voteNum">999</text>
							<image :src="baseurl+'project/vote.png'" class="voteIcon"></image>
							<image :src="baseurl+'project/message.png'" class="messageIcon"></image>
						</view>
					</view>
					<text class="publishInfo">房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、</text>
					<view class="replyBox">
						<view class="replyItem">
							<view class="replyItemHead">
								<image :src="baseurl+'project/test.png'" class="replyAvatar"></image>
								<text class="replyName">测试姓名</text>
							</view>
							<text
								class="replayInfo">房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、</text>
						</view>
					</view>
				</view>
				<view class="publishItem">
					<view class="publishHead">
						<image :src="baseurl+'project/test.png'" class="avatar"></image>
						<view class="publishNameBox">
							<text class="name">测试姓名</text>
							<text class="time">2024-06-09</text>
						</view>
						<view class="publishVoteBox">
							<text class="voteNum">999</text>
							<image :src="baseurl+'project/vote.png'" class="voteIcon"></image>
							<image :src="baseurl+'project/message.png'" class="messageIcon"></image>
						</view>
					</view>
					<text class="publishInfo">房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、</text>
					<view class="replyBox">
						<view class="replyItem">
							<view class="replyItemHead">
								<image :src="baseurl+'project/test.png'" class="replyAvatar"></image>
								<text class="replyName">测试姓名</text>
							</view>
							<text
								class="replayInfo">房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、</text>
						</view>
					</view>
				</view>
				<view class="publishItem">
					<view class="publishHead">
						<image :src="baseurl+'project/test.png'" class="avatar"></image>
						<view class="publishNameBox">
							<text class="name">测试姓名</text>
							<text class="time">2024-06-09</text>
						</view>
						<view class="publishVoteBox">
							<text class="voteNum">999</text>
							<image :src="baseurl+'project/vote.png'" class="voteIcon"></image>
							<image :src="baseurl+'project/message.png'" class="messageIcon"></image>
						</view>
					</view>
					<text class="publishInfo">房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、</text>
					<view class="replyBox">
						<view class="replyItem">
							<view class="replyItemHead">
								<image :src="baseurl+'project/test.png'" class="replyAvatar"></image>
								<text class="replyName">测试姓名</text>
							</view>
							<text
								class="replayInfo">房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、房源特色中的交通信息、周边配套、绿化率、容积率、得房率、在建设施、</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="menuBox">
			<view class="btn">
				我也要评论/提问
			</view>
		</view>
		<view class="answerBox">
			<textarea class="textArea" maxlength="140"/>
			<view class="send">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '项目名称',
					bgColor: 'transparent',
					color: '#000000',
				},
				tabs: ['全部(112)', '开盘(112)', '价格(112)', '全部(112)', '开盘(112)', '价格(112)', '全部(112)', '开盘(112)', '价格(112)'],
				content: ''
			}
		},
		onLoad(options) {
			// 项目详情
			// this.$request.get(`project.project/detail?project_id=${options.id}`).then(res => {
			// 	console.log(res.data.data);
			// 	this.content = res.data.data;
			// })
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.answerBox{
		position: fixed;
		width: 100%;
		height: 310rpx;
		bottom: 0;
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		.textArea{
			width: 686rpx;
			height: 176rpx;
			background: #D0E0E7;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			font-size: 28rpx;
		}
		.send{
			position: absolute;
			width: 100rpx;
			height: 56rpx;
			background: #428A9A;
			border-radius: 82rpx 82rpx 82rpx 82rpx;
			top: 136rpx;
			right: 48rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
	}
	.menuBox{
		position: fixed;
		width: 100%;
		height: 212rpx;
		bottom: 0;
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		.btn{
			width: 686rpx;
			height: 80rpx;
			margin-left: 32rpx;
			margin-top: 32rpx;
			background: url('https://miantou.guguan.net/img/project/commentBg.png');
			background-size: 100% 100%;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 80rpx;
			color: #fff;
		}
	}
	.replyBox {
		width: 550rpx;
		background: #D0E0E7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 16rpx;
		margin-left: 86rpx;
		margin-top: 16rpx;
		.replyItem {
			margin-bottom: 16rpx;
			.replyItemHead {
				display: flex;
				height: 48rpx;
				align-items: center;
				.replyAvatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}
				.replyName {
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}

			.replayInfo {
				width: 100%;
				font-size: 24rpx;
				margin-top: 16rpx;
			}

		}
	}

	.publishList {
		position: fixed;
		width: 686rpx;
		margin-top: 30rpx;
		position: relative;
		border-radius: 15rpx;
		padding: 24rpx 24rpx 60rpx 24rpx;
		background-color: #fff;
		height: 68vh;
		overflow-y: scroll;

		.publishItem {
			width: 100%;
			position: relative;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border-bottom: 2rpx solid #F5F5F5;
			padding-bottom: 24rpx;
			margin-bottom: 24rpx;
			.showAll {
				display: block;
				color: #9B9292;
				font-size: 22rpx;
				margin-top: 24rpx;
				float: right;
				margin-right: 24rpx;
			}

			.publishInfo {
				width: 550rpx;
				margin-left: 88rpx;
				margin-top: 24rpx;
				display: block;
			}

			.publishHead {
				width: 100%;
				display: flex;
				position: relative;

				.publishVoteBox {
					display: flex;
					height: 72rpx;
					position: absolute;
					right: 0;
					top: 0;
					align-items: center;

					.voteNum {
						font-size: 28rpx;
					}

					.voteIcon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}

					.messageIcon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}

				.publishNameBox {
					height: 72rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 16rpx;

					.name {
						font-size: 28rpx;
					}

					.time {
						font-size: 22rpx;
					}
				}

				.avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.tabsBox {
		width: 100%;
		margin-left: 35rpx;
		margin-top: 20rpx;
		overflow-x: scroll;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background: url('https://miantou.guguan.net/img/project/newsBg.jpg');
		background-size: 100% 100%;
	}
</style>